
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文豆集团-IT服务企业</title>
    <link rel="stylesheet" href="css/Common.css">
    <link rel="stylesheet" href="css/contact.css">
</head>
<body>
<div class="container">
    <{if $userid == 0 }><{include file="header.tpl"}><{else}><{include file="user_center_header.tpl"}><{/if}>
    <div class="main">
        <img src="../images/cases_banner.jpg" alt="">
        <div class="main_load">
            <a href="index.php">首页</a>&nbsp;>
            联系我们
        </div>
        <div class="main_left">
            <h1><{$article.title}></h1>
            <div>
                <{$article.content}>
            </div>
        </div>
        <div class="main_right">
            <h1>contact us</h1>
            <p>
                欢迎来电垂询，或使用下面的表单就行沟通，Please call us,or use form delow to make contact
            </p>
            <form action="contact.php" method="post">
                <ul class="form">
                    <li>
                        您的姓名：<br><input id="username" type="text" name="username" >
                        <br/><span id="user_span"></span>
                    </li>
                    <li>
                        您的邮箱：<br><input id="mail" type="text" name="mail" >
                        <br/><span id="mail_span"></span>
                    </li>
                    <li>
                        您的手机号：<br><input id="phone" type="text" name="phone">
                        <br/><span id="phone_span"></span>
                    </li>
                    <li>
                        输入您需要的服务内容：<br><textarea id="text_content" name="text_content" maxlength="70"></textarea>
                        <br/><span id="content_span"></span>
                        <br/><span id="content_reporting"></span>
                    </li>
                    <li><input class="submit" type="submit" name="dosubmit" value="发送/SEND"></li>
                </ul>
            </form>
        </div>
        <iframe src="http://map.baidu.com/?newmap=1&ie=utf-8&s=s%26wd%3D%E5%B9%BF%E5%B7%9E%E6%96%87%E8%B1%86"></iframe>
    </div>
    <{include file="footer.tpl"}>
</div>
</body>
</html>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $("#username").focus(function(){
        $("#user_span").css("display","none");
    });
    $("#username").blur(function(){

        if($(this).val()==""){
            $("#user_span").html("姓名不能为空");
            $("#user_span").css("display","inline");
            return false;
        }
        if($(this).val().length<4 || $(this).val().length>16){
            $("#user_span").html("姓名长度为4-16个字符");
            $("#user_span").css("display","inline");
            return false;
        }
        if(!/^[a-z][0-9a-z]{4,16}$/i.test($(this).val())){
            $("#user_span").html("姓名只能是英文字母开头的字母、数字组合");
            $("#user_span").css("display","inline");
            return false;
        }
    });
    $("#mail").focus(function(){
        $("#mail_span").css("display","none");
    });
    $("#mail").blur(function(){
        if($(this).val()==""){
            $("#mail_span").html("邮箱不能为空");
            $("#mail_span").css("display","inline");
            return false;
        }
        if(!/^[0-9a-z_]+@[a-z0-9]+\.[a-z]+$/i.test($(this).val())){
            $("#mail_span").html("您输入的邮箱格式不正确");
            $("#mail_span").css("display","inline");
            return false;
        }
    });
    $("#phone").focus(function(){
        $("#phone_span").css("display","none");
    });
    $("#phone").blur(function(){

        if($(this).val()==""){
            $("#phone_span").html("电话不能为空");
            $("#phone_span").css("display","inline");
            return false;
        }
        if($(this).val().length != 11){
            $("#phone_span").html("您输入的手机号长度不对");
            $("#phone_span").css("display","inline");
            return false;
        }
        if(!/^1[34578][0-9]{9}$/.test($(this).val())){
            $("#phone_span").html("您输入的手机号格式不正确");
            $("#phone_span").css("display","inline");
            return false;
        }
    });
    $("#content_span").css("display","none");
    function getContent(){
        var maxlen = $("#text_content").attr("maxlength");
        var len = $("#text_content").val().length;
        $("#content_span").html("还能输入" + (maxlen-len) + "个字");
    }
    $("#text_content").keyup(function(){
        getContent();
        $("#content_span").css("display","inline");
    });
    $("#text_content").focus(function(){
        $("#content_reporting").css("display","none");
    });

    $("#text_content").blur(function(){
        if($(this).val()==""){
            $("#content_reporting").html("留言内容不能为空");
            $("#content_reporting").css("display","inline");
            return false;
        }
        if($(this).val().length < 10){
            $("#content_reporting").html("留言内容不少于10个字符");
            $("#content_reporting").css("display","inline");
            return false;
        }
    });
</script>